<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="open"
    width="800px"
    :close-on-click-modal="false"
    append-to-body
  >
    <div v-loading="loading">
      <el-descriptions :column="2" border size="medium" v-if="topic">
        <el-descriptions-item label="题目名称" :span="2">
          <span class="topic-title">{{ topic.title }}</span>
        </el-descriptions-item>
        
        <el-descriptions-item label="指导教师">
          <i class="el-icon-user"></i> {{ topic.teacherName }}
        </el-descriptions-item>
        
        <el-descriptions-item label="难度等级">
          <el-tag :type="getDifficultyType(topic.difficulty)" size="small">
            {{ topic.difficulty }}
          </el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item label="名额情况">
          <el-tag :type="getRemainingSlotsType(topic)" size="small">
            {{ topic.currentStudents || 0 }}/{{ topic.maxStudents }}
          </el-tag>
          <span style="margin-left: 10px; color: #909399;">
            剩余 {{ topic.maxStudents - (topic.currentStudents || 0) }} 个名额
          </span>
        </el-descriptions-item>
        
        <el-descriptions-item label="题目状态">
          <el-tag :type="getStatusType(topic.status)" size="small">
            {{ topic.status }}
          </el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item label="题目描述" :span="2">
          <div class="description-text">{{ topic.description }}</div>
        </el-descriptions-item>
        
        <el-descriptions-item label="技能要求" :span="2">
          <div class="description-text">{{ topic.requirements || '无' }}</div>
        </el-descriptions-item>
        
        <el-descriptions-item label="技术标签" :span="2" v-if="topic.tags && topic.tags !== '[]'">
          <el-tag
            v-for="tag in parseTags(topic.tags)"
            :key="tag"
            size="small"
            type="info"
            effect="plain"
            style="margin-right: 5px; margin-bottom: 5px;"
          >{{ tag }}</el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item label="发布时间">
          {{ topic.createTime }}
        </el-descriptions-item>
        
        <el-descriptions-item label="更新时间">
          {{ topic.updateTime }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getTopicDetail } from "@/api/system/topic";

export default {
  name: "TopicDetail",
  data() {
    return {
      // 主对话框
      open: false,
      loading: false,
      topic: null
    };
  },
  computed: {
    dialogTitle() {
      return this.topic ? '题目详情 - ' + this.topic.title : '题目详情';
    }
  },
  methods: {
    /** 打开对话框 */
    openDialog(topicId) {
      this.open = true;
      this.loading = true;
      this.topic = null;
      
      // 加载题目详情
      getTopicDetail(topicId).then(response => {
        this.topic = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    /** 解析标签 */
    parseTags(tags) {
      if (!tags) return [];
      try {
        return JSON.parse(tags);
      } catch (e) {
        return [];
      }
    },
    /** 难度标签类型 */
    getDifficultyType(difficulty) {
      const map = {
        '简单': 'success',
        '中等': '',
        '困难': 'danger'
      };
      return map[difficulty] || 'info';
    },
    /** 状态标签类型 */
    getStatusType(status) {
      const map = {
        '开放': 'success',
        '已满': 'danger',
        '已关闭': 'info'
      };
      return map[status] || 'info';
    },
    /** 剩余名额标签类型 */
    getRemainingSlotsType(topic) {
      const remaining = topic.maxStudents - (topic.currentStudents || 0);
      if (remaining === 0) return 'danger';
      if (remaining <= 2) return 'warning';
      return 'success';
    }
  }
};
</script>

<style scoped lang="scss">
.topic-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.description-text {
  line-height: 1.8;
  color: #606266;
  white-space: pre-wrap;
}

::v-deep .el-descriptions__label {
  width: 120px;
}
</style>